<style>
  .wrapper1 {
    height: 400px;
    width: 400px;
    margin: auto;
    border: 1px dashed #ccc;
  }

  p:has([data-v])+.wrapper1 {
    writing-mode: vertical-rl;
  }

  [data-h],
  [data-v] {
    background: #47e;
    color: white;
  }

  .wrapper1 .block {
    background-color: #555;
    padding: 6px;
    border-radius: 2px;
  }

  .wrapper1 .inline {
    background-color: #99fc;
    color: rgb(47, 75, 233);
    cursor: pointer;
  }

  .inline.m {
    margin: 25px;
  }

  .inline.p {
    padding: 20px 20px 60px 25px;
  }

  .inline.b {
    border-color: #f009;
    border-style: solid;

    /* border-width: 3px 5px 23px 15px; */

    border-block-start-width: 3px;
    border-inline-end-width: 5px;
    border-block-end-width: 23px;
    border-inline-start-width: 15px;

    /* border-block-width: 3px 23px;
    border-inline-width: 15px 5px; */
  }
</style>
<h2>inline/block测试：</h2>
<p>
  <span>稳定布局测试：</span>
  <button onclick="toggleVH(event,'nextElementSibling')" data-h>横向书写</button>
  <button onclick="toggleVH(event,'previousElementSibling')">纵向书写</button>
  <span>（注意border-start 的写法，能保持布局稳定）</span><br />
  <i>tip: 脚本仅仅操作按钮属性； has选择器 +选择器 定位wrapper设置书写mode</i>
</p>

<div class="wrapper1" id="ib_wrapper1">
  <div class="block" style="color: white">
    span是一个 <span class="inline m">inline</span> 元素，这意味着它的 margin-block不会影响布局，实际也不存在
  </div>
  <div style="width: 0.75em; height: 0.75em"></div>
  <div class="block" style="color: yellow">
    另起一行测试，span是一个
    <span class="inline p">inline</span> 元素，它既有padding-inline，又有padding-block，但padding-block不会影响布局
  </div>
  <div style="width: 0.75em; height: 0.75em"></div>
  <div class="block" style="color: lightblue">
    测试border了, <span class="inline b">inline</span> 同padding一样，都有效果，但block方向的border不会影响布局
  </div>
</div>

<script>
  function toggleVH(e, key) {
    const clickBtn = e.target;
    const anotherBtn = e.target[key];

    if (anotherBtn.hasAttribute('data-v')) {
      clickBtn.setAttribute('data-h', '');
      anotherBtn.removeAttribute('data-v');
    }
    if (anotherBtn.hasAttribute('data-h')) {
      clickBtn.setAttribute('data-v', '');
      anotherBtn.removeAttribute('data-h');
    }
  }
</script>

<style>
  .wrapper2 {
    border: 1px solid #eee;
    width: 350px;
    margin: 10px auto;
  }

  .wrapper2 img {
    outline: 1px solid #ccc;
    width: 100px;
  }

  .wrapper2 i {
    display: inline-block;
    outline: 1px dashed red;
    width: 100px;
  }

  .wrapper2 :is(img, i):nth-child(3n + 2) {
    margin: 0 18px;
  }
</style>
<h2>元素间隙测试：</h2>
<p>
  <a href="https://demo.cssworld.cn/5/3-6.php">两端对齐列表的间隙问题</a>:<br />
  主要是内联标签之间不能有换行空格之类，有的话浏览器渲染时元素间就会出现间隙，这个问题设置font-size为0恰好可以解决。<br />
  主要解决方式是避免元素间有空白。(用font-size：0、line-height：0 或设置flex或浮动，一堆花里胡哨的方案，不建议用！)<br />
</p>
标签之间无间隙：
<div class="wrapper2">
  <img src="../../assets/images.png" /><img src="../../assets/images.png" /><img src="../../assets/images.png" /><img
    src="../../assets/images.png" /><img src="../../assets/images.png" /><i></i><i></i><i></i><i></i>
</div>
标签之间有间隙：
<div class="wrapper2" style="/* font-size: 0; */ /* line-height: 0; */">
  <img src="../../assets/images.png" />
  <img src="../../assets/images.png" />
  <img src="../../assets/images.png" />
  <img src="../../assets/images.png" />
  <img src="../../assets/images.png" />
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>